<!--
 * @Description: 
 * @Author: charles
 * @Date: 2021-05-05 22:02:56
 * @LastEditors: [yuantongxin]
 * @LastEditTime: 2021-09-22 18:33:29
-->
<template>
  <div ref="root" style="height:150px">
  </div>
</template>

<script>
import {Column} from '@antv/g2plot'
export default {
  data(){
    return {}
  },
  methods:{
    initCharts(){
      const data = [
  {
    name: '城镇',
    月份: 'Jan.',
    总数: 18.9,
  },
  {
    name: '城镇',
    月份: 'Feb.',
    总数: 28.8,
  },
  {
    name: '城镇',
    月份: 'Mar.',
    总数: 39.3,
  },
  {
    name: '城镇',
    月份: 'Apr.',
    总数: 81.4,
  },
  {
    name: '城镇',
    月份: 'May',
    总数: 47,
  },
  {
    name: '城镇',
    月份: 'Jun.',
    总数: 20.3,
  },
  {
    name: '城镇',
    月份: 'Jul.',
    总数: 24,
  },
  {
    name: '城镇',
    月份: 'Aug.',
    总数: 35.6,
  },
  {
    name: '农村',
    月份: 'Jan.',
    总数: 12.4,
  },
  {
    name: '农村',
    月份: 'Feb.',
    总数: 23.2,
  },
  {
    name: '农村',
    月份: 'Mar.',
    总数: 34.5,
  },
  {
    name: '农村',
    月份: 'Apr.',
    总数: 99.7,
  },
  {
    name: '农村',
    月份: 'May',
    总数: 52.6,
  },
  {
    name: '农村',
    月份: 'Jun.',
    总数: 35.5,
  },
  {
    name: '农村',
    月份: 'Jul.',
    总数: 37.4,
  },
  {
    name: '农村',
    月份: 'Aug.',
    总数: 42.4,
  },
];

const stackedColumnPlot = new Column(this.$refs['root'], {
  data,
  isGroup: true,
  xField: '月份',
  yField: '总数',
  seriesField: 'name',
  /** 设置颜色 */
  //color: ['#1ca9e6', '#f88c24'],
  /** 设置间距 */
  // marginRatio: 0.1,
  label: {
    // 可手动配置 label 数据标签位置
    position: 'middle', // 'top', 'middle', 'bottom'
    // 可配置附加的布局方法
    layout: [
      // 柱形图数据标签位置自动调整
      { type: 'interval-adjust-position' },
      // 数据标签防遮挡
      { type: 'interval-hide-overlap' },
      // 数据标签文颜色自动调整
      { type: 'adjust-color' },
    ],
  },
          xAxis: {
          label: {
            style: {
              fill: "white",
              fontFamily: "TencentSans",
              fontSize: 13,
            },
          },
        },
        yAxis: {
          grid: {
            line: {
              style: {
                lineDash: [2, 3],
                strokeOpacity: 0.2,
              },
            },
          },
          label: {
            style: {
              fill: "white",
              fontFamily: "TencentSans",
              fontSize: 16,
            },
          },
        },    
});

stackedColumnPlot.render();
    }
  },
  mounted(){
    this.initCharts()
  }

}
</script>